import React from 'react'

export default function List(props) {
  return (
    <div>
        <ul>
            {
                props.list.map((item,index)=>{
                    return <li key={item.id} style={{display:'flex'}}>
                        <div style={{display:'flex'}}>
                            <input type="checkbox" checked={item.flag} onChange={props.change.bind(this,index)} />
                            <img src={item.img} alt="" />
                        </div>
                        <div>
                            <p>{item.text}</p>
                            <p>{item.price}</p>
                            <button onClick={props.changeCount.bind(this,index,-1)}>-</button>{item.count}
                            <button  onClick={props.changeCount.bind(this,index,1)}>+</button>
                        </div>
                    </li>
                })
            }
        </ul>
    </div>
  )
}
